import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

class AlphabetDetailPage extends StatefulWidget {
  final String letter;
  final String imagePath;
  final String audioPath;
  final String phonetic;
  final List<String> examples;

  const AlphabetDetailPage({
    required this.letter,
    required this.imagePath,
    required this.audioPath,
    required this.phonetic,
    required this.examples,
  });

  @override
  _AlphabetDetailPageState createState() => _AlphabetDetailPageState();
}


class _AlphabetDetailPageState extends State<AlphabetDetailPage> {
  final AudioPlayer _audioPlayer = AudioPlayer();
  bool _isPlaying = false;

  @override
void initState() {
  super.initState();
  _audioPlayer.onPlayerComplete.listen((_) {
    setState(() => _isPlaying = false);
  });
}

  @override
  void dispose() {
    _audioPlayer.dispose();
    super.dispose();
  }

  Future<void> _playAudio() async {
    if (!_isPlaying) {
      await _audioPlayer.play(AssetSource(widget.audioPath));
      _audioPlayer.onPlayerComplete.listen((_) {
        setState(() => _isPlaying = false);
      });
      setState(() => _isPlaying = true);
    } else {
      await _audioPlayer.pause();
      setState(() => _isPlaying = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('字母 ${widget.letter.toUpperCase()}'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            Image.asset(widget.imagePath, width: 200, height: 200),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                IconButton(
                  icon: Icon(_isPlaying ? Icons.pause : Icons.play_arrow),
                  iconSize: 40,
                  onPressed: _playAudio,
                ),
                Text(
                  '音标: ${widget.phonetic}',
                  style: const TextStyle(fontSize: 24),
                ),
              ],
            ),
            const SizedBox(height: 30),
            const Text(
              '例句:',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            Expanded(
              child: ListView.separated(
                itemCount: widget.examples.length,
                separatorBuilder: (context, index) => const Divider(),
                itemBuilder: (context, index) => Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0),
                  child: Text(
                    widget.examples[index],
                    style: const TextStyle(fontSize: 18),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
